<template>
  <div id="spu">
    <div class="containner flex justify-between item-start">
      <!-- 商品大图 -->
      <div class="spu-ablum-bar"><img
          :src="product.base_img_url + product.spu.attrKeyList[0].attrValueList[product.ablum_index].value_images[product.ablum_item_index]"
          width="450px" height="450px" class="rounded hand">
        <div class="mt-10 spu-ablum-group flex item-center">
          <div class="spu-ablum-left hand">&lt;</div>
          <div class="spu-ablum-center">
            <!-- 商品小图 -->
            <table border="0px" cellpadding="0px" cellspacing="0px">
              <tr>
                <td v-for="(ablum,index) in product.spu.attrKeyList[0].attrValueList[product.ablum_index].value_images">
                  <img width="90px" height="90px" :src="product.base_img_url+ablum" class="spu-ablum-item hand"
                    :class="{'active':index==product.ablum_item_index}" @mousemove="ablum_mousemove(index)">
                </td>
              </tr>
            </table>
          </div>
          <div class="spu-ablum-right hand">&gt;</div>
        </div>
      </div>
      <div class="spu-info-bar">
        <div class="text-left text-xl bold dark">{{product.sku.sku_name}}</div>
        <div class="text-left text-xl mt-10"><span class="red weight">现价：</span><span
            class="red weight sku-price">￥{{product.sku.sku_price}}</span><span
            class="gray bold text-md ml-20">原价：</span><span
            class="gray bold sku-original-price">￥{{product.sku.sku_originalprice}}</span></div>
        <div class="text-left bold gray text-lg my-20"> 库存：{{product.sku.sku_quantity}} </div>
        <!-- 商品属性attrKeyList -->
        <div class="flex item-start sku-attr my-5" v-for="(attr,index) in product.spu.attrKeyList" :key="attr.key_id">
          <!-- 商品属性attrKeyList中的key_name -->
          <div class="sku-attr-name text-left gray text-lg bold">{{attr.key_name}}</div>
          <!-- 商品属性attrKeyList中的attrValueList -->
          <div class="sku-attr-group flex wrap item-center">
            <!-- 遍历商品属性attrKeyList中的attrValueList -->
            <div v-for="(attr_value,img_index) in attr.attrValueList" :key="attr_value.value_id"
              class="sku-attr-item gray bold text-md rounded hand pr-10 my-5 flex item-center mx-5"
              @click="attr_value_clicked(attr_value,index,attr_value.value_images.length > 0,img_index)"
              :class="{'active':valid_attr_value(attr_value)}">
              <img :src="product.base_img_url + attr_value.value_images[0]" height="34px"
                v-if="attr_value.value_images.length>0">
              <div>{{attr_value.value_name}}</div>
            </div>
          </div>
        </div>
        <div class="mt-20 flex item-center"><input type="number" min="1" class="buy-number hand" value="1"
            v-model="product.buy_number"><button class="btn-cart hand mx-20" @click="add_cart()">加入购物车</button><button
            class="btn-buy hand">立即购买</button></div>
      </div>
    </div>
    <div class="containner mt-20">
      <div class="px-20 py-20 rounded box-shadow"> <img :src="require('@/assets/img/spu_introduce_01.jpg')"
          width="100%">
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapActions
  } from 'vuex'

  export default {
    computed: {
      // ...mapState('product', ['spu'])
      ...mapState(['product'])
    },
    methods: {
      //商品相关
      ...mapMutations('product', ['set_sku', 'set_ablum_index', 'set_ablum_item_index', 'set_sku_attr_list']),
      // 购物车相关
      ...mapActions('cart', ['add_cart']),
      //设置图片下标
      ablum_mousemove(index) {
        this.set_ablum_item_index(index)
      },
      // 验证当前选择的商品Sku 是否含有 某个规格属性值
      valid_attr_value(attr_value) {
        // 循环 当前选择的商品Sku属性
        for (let sku_attr of this.product.sku_attr_list) {
          // 判断 当前循环到的商品Sku属性值id 是否和 当前要验证的规格属性值id一致
          if (sku_attr.value_id == attr_value.value_id) {
            return true;
          }
        }
        return false;
      },
      // 点击了商品规格属性值
      attr_value_clicked(attr_value, index, has_img, img_index) {
        // 根据这次更改的商品规格属性值 重新组成sku
        let new_sku = this.product.sku_attr_list;
        new_sku[index] = attr_value;
        // 判断这次更改商品规格属性值，是否可以组成新的有效sku
        // 循环有效的sku
        for (let sku of this.product.spu.skuList) {
          // 标记变量
          let flag = 0;
          // 获取sku中的属性列表
          let sku_attr_list = JSON.parse(sku.sku_spuattr);
          // 循环sku中的属性
          for (let i = 0; i <= sku_attr_list.length - 1; i++) {
            if (sku_attr_list[i].value_id != new_sku[i].value_id) {
              flag = 1;
              break;
            }
          }
          if (flag == 0) {
            // new_sku 可以组成新的sku
            this.set_sku(sku);
            // 判断是否需要改变相册索引
            if (has_img) {
              this.set_ablum_index(img_index);
            }
          }
        }
      }
    },
    mounted() {
      //设置当前spu的第一个sku
      this.set_sku(this.product.spu.skuList[0])
      this.set_sku_attr_list(JSON.parse(this.product.sku.sku_spuattr))
    }
  }
</script>

<style scoped>
  @import '../assets/css/spuDetail.css';
</style>
